<template>
	<div class="bg-white p-2 position-relative">
		<Row class="p-1">

			<Col class="p-1" span="4" :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3">
			<Input :class="'w-100 '" v-model="param.name" placeholder="请输入门店名称" />
			</Col>
			<Col class="p-1" span="4" :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3">
			<Input :class="'w-100 '" v-model="param.address" placeholder="请输入门店地址" />
			</Col>
			<Col class="p-1" span="4" :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3">
			<Input :class="'w-100 '" v-model="param.conTel" placeholder="请输入联系电话" />
			</Col>
			<Col class="p-1" span="4" :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3">
			<Input :class="'w-100 '" v-model="param.conPerson" placeholder="请输入联系人" />
			</Col>
			<Col span="4" class="p-1" :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3">
			<Select class="w-100" :clearable="true" v-model="param.statu">
				<Option value="true">启用</Option>
				<Option value="false">禁用</Option>
			</Select>
			</Col>
			<Col :xs="24" class="p-1">
			<Button class="m-1 float-left" shape="circle" type="error" @click="newStore" icon="md-add">新增</Button>
			<Button span="2" class="m-1 float-right" type="primary" shape="circle" @click="searchs"
				icon="ios-search">查询</Button>
			</Col>
		</Row>
		<div class="mt-1 d-xl-none">
			<Row class="bg-white border-top border-dark">

				<Col v-for="(store, index) in tableInfo.data" :xs="24" :sm="12" :md="8" :lg="8" :xl="6" :xxl="6"
					class="p-1 mt-2">
				<div class="shadow p-3 radius text-xs text-secondary">
					<div class="p-1 d-flex justify-content-between">
						<span>门店编号</span>
						<span>{{store.storeId}}</span>
					</div>
					<div class="p-1 d-flex justify-content-between">
						<span>门店名称</span>
						<span>{{store.name}}</span>
					</div>
					<div class="p-1 d-flex justify-content-between">
						<span>联系电话</span>
						<span>{{store.conTel}}</span>
					</div>
					<div class="p-1 d-flex justify-content-between">
						<span>联系人</span>
						<span>{{store.conPerson}}</span>
					</div>
					<div class="p-1 d-flex justify-content-between">
						<span>门店地址</span>
						<span>{{store.address}}</span>
					</div>
					<div class="p-1 d-flex justify-content-between">
						<span>门店描述</span>
						<span>{{store.des}}</span>
					</div>
					<div class="p-1 d-flex justify-content-between">
						<span>状态</span>
						<span v-if="store.statu">启用</span>
						<span v-else>停用</span>
						<!-- <span>{{store.statu}}</span> -->
					</div>
					<div class="p-1 d-flex justify-content-end text-sm">
						<Button type="error" @click="remove(store.storeId)" ghost>删除</Button>
						<Button type="primary" class="ml-3" @click="show(store.storeId)" ghost>详细</Button>

					</div>
				</div>
				</Col>
			</Row>
			
		</div>
		<div class="mt-1 d-none d-xl-block">
			<Table border :class="'m-1'" :columns="tableInfo.columnInfo" :data="tableInfo.data">
				<template slot-scope="{ row, index }" slot="statu">
					<span v-if="row.statu">启用</span>
					<span v-else>停用</span>
				</template>
				<template slot-scope="{ row, index }" slot="action">
					<Button type="primary" size="small" style="margin-right: 5px" @click="show(row.storeId)">详细</Button>
					<Button type="error" size="small" @click="remove(row.storeId)">删除</Button>
				</template>
			</Table>
		</div>
		<div>
			<Page :class="'m-2 text-right'" :page-size="tableInfo.pageSize" @on-change="pageSearch"
				:total="tableInfo.total" />
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				param: {
					name: "",
					address: "",
					conTel: "",
					conPerson: "",
					statu: ""
				},
				tableInfo: {
					pageSize: 10, //每页条数
					currentPage: 1, //当前页码
					total: 0, //总数
					columnInfo: [{
							title: "门店编号",
							key: "storeId",
							width: 100
						},
						{
							title: "门店名称",
							key: "name",
							width: 200
						},
						{
							title: "联系电话",
							key: "conTel",
							width: 150
						},
						{
							title: "联系人",
							key: "conPerson",
							width: 150
						},
						{
							title: "门店地址",
							key: "address",
						},
						{
							title: "门店描述",
							key: "des",
						},
						{
							title: "状态",
							slot: "statu",
							width: 100
						},
						{
							title: "操作",
							slot: 'action',
							width: 200
						}
					],
					data: []
				}

			};
		},
		methods: {
			init: function() {
				this.tableInfo.currentPage = 0;
				this.search();
			},
			newStore: function() {
				this.$router.push({
					name: "store_new"
				});
			},
			show: function(storeId) {
				this.$router.push({
					name: "store_detail",
					params: {
						storeId
					}
					// path: "/store/detail/"+storeId,
				});
			},
			update(storeId) {
				this.$router.push({
					name: "store_update",
					params: {
						storeId
					}
				});
			},
			remove: function(storeId) {

				this.message.confirm({
					title: "删除提示",
					content: "即将删除门店，确定么？",
					onOk: () => {
						this.http.delete({
							url: "/store/store/info",
							param: {
								storeId
							}
						}).then(data => {
							this.searchs();
						});
					},
					onCancel: () => {
						this.message.info('操作已取消');
					}
				});
			},
			//查询按钮
			search: function() {

				console.log(this.param.statu);
				this.http.get({
					url: "/store/store/list",
					param: {
						param: this.param,
						current: this.tableInfo.currentPage,
						size: this.tableInfo.pageSize
					}
				}).then(data => {
					this.tableInfo.currentPage = data.current;
					this.tableInfo.total = data.total;
					this.tableInfo.pageSize = data.size;
					this.tableInfo.data = data.records;
				});
			},
			searchs: function() {
				this.tableInfo.currentPage = 1;
				this.search();
			},
			pageSearch: function(changedPage) {
				this.tableInfo.currentPage = changedPage;
				this.search();
			}
		},
		created: function() {
			this.init();
		},
		watch: {
			$route(to, from) {
				if (to.path == "/store") {
					this.init();
				}
			}
		},

	}
</script>

<style>

</style>